<template>
  <div>
    <el-form label-width="120px">
      <el-form-item label="需求类型">
        <el-radio-group v-model="form.type">
          <el-radio v-for="x in types" :key="x.value" :label="x.value">{{ x.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="需求内容">
        <el-input
          v-model="form.content"
          aria-placeholder="请输入需求内容"
          placeholder="请输入需求内容"
          type="textarea"
          :rows="4"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { create } from '../../api/demand'
export default {
  data() {
    return {
      form: {
        content: '',
        type: 4
      },
      types: [
        {
          label: '讲座对接',
          value: 1
        },
        {
          label: '研学实践',
          value: 2
        },
        {
          label: '活动邀约',
          value: 3
        },
        {
          label: '其他',
          value: 4
        }
      ]
    }
  },
  methods: {
    handleSubmit() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      create(this.form).then((res) => {
        console.log('需求', res)
        this.$message.success('保存成功')
        this.$router.push({
          name: 'demand-index'
        })
      }).finally(() => {
        loading.close()
      })
    }
  }
}
</script>
